<template>
	<view class="trading-detatils">
		<view class="trading-detatils-type">
			<view class="iconfont iconzengjia" :class="{'iconjianshao': detailData.type > 2}"></view>
			<view class="sum">{{detailData.type > 2 ? '-' : '+'}}{{detailData.sum}}{{type}}</view>
			<view class="sum-type1" :class="{'sum-type2': detailData.type > 2}">{{type}}{{detailData.type > 2 ? '付款' : '收款'}}成功</view>
		</view>
		<van-cell-group>
		  <van-cell
			title="发送地址"
			:label="detailData.sendToken"
		  />
		   <van-cell
			title="接收地址"
			:label="detailData.receiveToken"
		  />
		  <van-cell
			title="旷工费"
			label="0.0002302 LAB"
		  />
		  <van-cell
			title="备注"
			:label="detailData.remark"
		  />
		</van-cell-group>
		<view class="trading-detatils-info">
			<view class="tdi">
				<view class="tdi-l">
					<view class="tdi-l-item">
						<view class="title">交易号:</view>
						<view class="color3">0exxxxsasas...saxaxa</view>
					</view>
					<view class="tdi-l-item">
						<view class="title">区块:</view>
						<view>82832</view>
					</view>
					<view class="tdi-l-item">
						<view class="title">交易时间:</view>
						<view>{{detailData.time}}</view>
					</view>
				</view>
				<view class="tdi-r">
					<view class="invite-bottom-qr">
						<block v-if="qrval">
							<qrcode :val="qrval" :size="qrsize" ref="qrcode"></qrcode>
						</block>
						<block v-else>
							<van-loading />
						</block>
					</view>
					<view class="tdi-r-btn bg2" hover-class="btn-hover" @click="onClipboardUrl">
						复制URL
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import qrcode from '../../../components/qrcode/qrcode.vue';
	import { mapGetters } from 'vuex'
	export default {
		components: {
			qrcode
		},
		data() {
			return {
				type: 'LAB',
				qrval: '0exxxxsasas...saxaxa',
				qrsize: 100
			}
		},
		onLoad (option) {
		},
		onShow () {
			this.creatQrcode();
		},
		computed: {
			...mapGetters({
				detailData: 'getTRDetailsData'
			}),
		},
		methods: {
			creatQrcode() {
				if (!this.qrval) {
					uni.showToast({
						title: '二维码生成失败',
						icon: 'none'
					});
					return;
				}
				this.$refs.qrcode.creatQrcode();
			},
			clearQrcode() {
				this.$refs.qrcode.clearQrcode();
			},
			onClipboardUrl() {
				uni.setClipboardData({
					data: this.qrval,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>
<style scoped lang="scss">
.trading-detatils {
	&-type {
		padding: 40upx 0;
		text-align: center;
		background-color: #fff;
	}
	.iconfont {
		font-size: 120upx;
	}
	.iconzengjia, .sum-type1 {
		color: #00ff1e;
	}
	.iconjianshao, .sum-type2 {
		color: #ff3c00
	}
	.sum {
		margin-top: 20upx;
		margin-bottom: 6upx; 
		font-size: 42upx;
	}
	&-info{
		background-color: #fff;
		.tdi {
			display: flex;
			justify-content: space-between;
			padding: 50upx 30upx;
			&-l {
				&-item {
					.title {
						color: #9b9b9b
					}
				}
				color: #565656;
			}
			&-r {
				text-align: center;
				&-btn {
					margin-top: 30upx;
					padding: 2upx 10upx;
					color: #fff;
					border-radius: 10upx;
				}
			}
		}
	}
}
</style>
